<template>
  <div style="display: contents">
    <div style="display: contents" v-for="menu in menuData" :key="menu.name">
      <q-expansion-item
        dark
        v-if="menu.children"
        :icon="menu.icon"
        :label="menu.name"
      >
        <q-card class="bg-primary">
          <q-card-section class="q-py-none q-px-md">
            <menu-item :menu-data="menu.children" />
          </q-card-section>
        </q-card>
      </q-expansion-item>
      <q-item
        dark
        v-else
        clickable
        v-ripple
        :to="menu.fullPath"
        :active="$route.meta.fullPath === menu.fullPath"
        active-class="menu-active-border text-deep-orange"
      >
        <q-item-section avatar>
          <q-icon :name="menu.icon" />
        </q-item-section>

        <q-item-section>{{ menu.name }}</q-item-section>
      </q-item>
      <q-separator dark color="secondary"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    menuData: {
      required: true
    }
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped>
  .menu-active-border
    border-right 3px solid $deep-orange
</style>
